<template>
  <mt-navbar title="提现账户">
    <template #right>
      <text class="text-28rpx text-#1484EE" @click="handleAddAccount">新增账户</text>
    </template>
  </mt-navbar>
  <view class="bg-#ffffff p-32rpx box-border" style="min-height: 100vh">
    <view v-for="item in dataList" :key="item.id" class="list" :class="{ weixin: item.accountType === 1, alipay: item.accountType === 2 }">
      <image
        v-if="item.accountType === 1"
        class="w-48rpx h-48rpx mr-16rpx"
        src="https://mingtu-resources.oss-cn-shenzhen.aliyuncs.com/mtym-app-assets/icon-withdrawal-weixin.svg"
      ></image>
      <image
        v-if="item.accountType === 2"
        class="w-48rpx h-48rpx mr-16rpx"
        src="https://mingtu-resources.oss-cn-shenzhen.aliyuncs.com/mtym-app-assets/icon-withdrawal-alipay.svg"
      ></image>
      <view class="flex-1 min-w-0">
        <view class="flex items-center justify-between">
          <text class="text-32rpx text-#FFFFFF">{{ item.withdrawAccountName }}</text>
          <uv-icon name="trash" color="#FFFFFF" size="36rpx" @click="handleDelete(item)"></uv-icon>
        </view>
        <view class="text-48rpx text-#FFFFFF font-bold mt-40rpx">{{ item.withdrawAccount }}</view>
      </view>
    </view>

    <view v-if="!dataList.length" class="pt-200rpx">
      <mt-empty-view></mt-empty-view>
    </view>

    <mt-modal ref="modalRef"></mt-modal>
  </view>
</template>

<script setup>
import { withdrawalAccountgetWithdrawAccount, withdrawalAccountdelWithdrawAccountApp } from '@/subCommission/api/index';
import { replaceMiddleWithAsterisks } from '@/utils/tools';

function handleAddAccount() {
  uni.navigateTo({
    url: '/subCommission/pages/addAccount'
  });
}

const modalRef = ref();
function handleDelete(row) {
  modalRef.value.open({
    title: '温馨提示',
    content: '是否删除此账号？',
    contentAlign: 'center',
    success: (e) => {
      if (e.confirm) {
        withdrawalAccountdelWithdrawAccountApp({ id: row.id }).then((res) => {
          getData();
        });
      }
    }
  });
}

const dataList = ref([]);
function getData() {
  withdrawalAccountgetWithdrawAccount({}).then((res) => {
    const arr = res.data || [];
    for (const item of arr) {
      item.withdrawAccount = replaceMiddleWithAsterisks(item.withdrawAccount);
    }
    dataList.value = arr.filter((son) => son.accountType !== 3);
  });
}

onShow(() => {
  getData();
});
</script>

<style lang="scss" scoped>
.list {
  display: flex;
  align-items: flex-start;
  padding: 32rpx 32rpx;
  border-radius: 8rpx;
  margin-bottom: 24rpx;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  &.alipay {
    background-image: url('https://mingtu-resources.oss-cn-shenzhen.aliyuncs.com/mtym-app-assets/withdrawal-bg-alipay.png');
  }
  &.weixin {
    background-image: url('https://mingtu-resources.oss-cn-shenzhen.aliyuncs.com/mtym-app-assets/withdrawal-bg-weixin.png');
  }
}
</style>
